<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="css/reset.css">
  
    <link rel="stylesheet" href="css/iconfont.css">
 
    <link rel="stylesheet" href="css/container.css">
    <link rel="stylesheet" href="css/footer.css">
    <style type="text/css">

        body {
            display: flex;
            flex-direction: row;
        }
        .sidebar {
            width: 200px;
            background-color: #f2f2f2;
            padding: 10px;
        }
        .content {
            flex-grow: 1;
            padding: 10px;
        }
        .nav-item {
            margin-bottom: 10px;
            cursor: pointer;
        }
        .dish-item img {
            width: 100px;
            height: 100px;
        }
        .content {  
            display: flex;  
            flex-wrap: wrap;  
            justify-content: space-around;  
        }  
          
        .dish-item {  
            width: 200px; 
            margin: 10px;  
            text-align: center;  
        }  
          
        .dish-item img {  
            width: 100%; 
            height: 130px; 
        }  
          
        .order-button {  
            display: inline-block;  
            margin-top: 10px; 
        }  
         .container2 {
     
        padding: 20px; 
        border-radius: 8px; 
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
        width: 350px; 
        margin: 20px; 
    }

    .form-wrapper2 {
        font-family: 'Arial', sans-serif;
    }

    form {
        display: flex;
        flex-direction: column; 
    }

    label {
        color: #333; 
        margin-bottom: 5px; 
    }

    input[type="text"],
    input[type="number"],
    input[type="hidden"] {
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ccc; 
        border-radius: 4px; 
        background: #fff; 
        color: #333; 
    }

    input[type="submit"] {
        background-color: #4caf50;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    input[type="submit"]:hover {
        background-color: #45a049;
    }

    
    input[type="hidden"] {
        display: none;
    }
    </style>
</head>
<body>


<div class="content">  
    <header class="mui-bar mui-bar-nav color" style="width: 100%;">  
        <h1 style="background-color: #017E5C; color:#eee;">餐厅【ID: <%= request.getParameter("restaurant_id") %>】菜单</h1>  
   
   <%
   String restaurant_id = (String) session.getAttribute("restaurant_id");
    String table_id = (String) session.getAttribute("table_id");
   String account = (String) session.getAttribute("account");
   String status = "waiting";
   String pay = "未支付";
   String admin_pwd = "0";
   String cooker_pwd = "0";
   
    if (table_id != null) {
        %>
        <h4>您的桌号是： <%= table_id %></h4>
        <h4>当前用户： <%= account %></h4>
        <% 
     
    } else {
        %>
        <p>请扫描桌子上的二维码开始点餐。</p >
        <%
    }
    %>
    </header>  

<%  
    String jdbcURL = "jdbc:mariadb://10.220.140.102:3366/studb11";  
    String username = "stua";  
    String password = "zHZUA65r";  
    Connection conn = null;  
    Statement stmt = null;  
    ResultSet rs = null;  
  
    try {  
        Class.forName("org.mariadb.jdbc.Driver");  
        conn = DriverManager.getConnection(jdbcURL, username, password);  
        stmt = conn.createStatement();  
        String sql = "SELECT * FROM dishes WHERE restaurant_id=" + request.getParameter("restaurant_id");  
          
        rs = stmt.executeQuery(sql);  
          
        out.println("<table class='dishes-table'>");  
        out.println("<thead>");  
        out.println("<tr>");  
        out.println("<th>菜品id</th>"); 
        out.println("<th>菜品名称</th>");  
        out.println("<th>菜品图片</th>");  
        out.println("<th>菜品价格</th>");  
        out.println("<th>添加到购物车</th>");  
        out.println("</tr>");  
        out.println("</thead>");  
        out.println("<tbody>");  
          
        while (rs.next()) {    
            int dish_id = rs.getInt("dish_id");    
            String name = rs.getString("name");    
            String dish_image = rs.getString("dishes_image");
            double dish_price = rs.getDouble("price"); 
              
          
            out.println("<tr>");  
            out.println("<td>" + dish_id + "</td>"); 
            out.println("<td>" + name + "</td>");  
            out.println("<td><img src='" + dish_image + "' alt='" + name + "' width='100' height='100'></td>"); 
            out.println("<td>" + dish_price + "</td>");  
            out.println("<td><input type='checkbox' class='add-to-cart' data-id='" + dish_id + "' data-name='" + name + "' onchange='addToCart(this)'></td>");  
            out.println("</tr>");  
        }  
          
        out.println("</tbody>");  
        out.println("</table>");  
    } catch (Exception e) {  
        e.printStackTrace();  
    } finally {  
        try {  
            if (rs != null) rs.close();  
            if (stmt != null) stmt.close();  
            if (conn != null) conn.close();  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }  

%>
<!-- JavaScript 函数示例（这些函数需要在你的页面中定义） -->  

  
 <div class="container2">  
    <div class="form-wrapper2">  
        <form action="ordersave.jsp" method="post">  
            <!-- 表单内容 -->  
            <label for="dish_id">餐品id:</label>  
            <input type="text" id="dish_id" name="dish_id" min="1" required> <br> 
             <label for="name">餐品名称:</label>  
            <input type="text" id="name" name="name" required> 
           
            <input type="hidden" id="price" name="price" min="1" required>  
            <br><label for="amount">数量：</label>  
            <input type="number" id="amount" name="amount" min="1" required> 
            <input type="hidden" id="table_id" name="table_id" value="<%=table_id%>"  required>   
            <input type="hidden" id="restaurant_id" name="restaurant_id" value="<%=restaurant_id%>"  required>  
            <input type="hidden" id="status" name="waiting" value="waiting"  required>   
            <input type="hidden" id="pay" name="未支付" value="未支付"  required>  
            
             <input type="submit" name="btn" value="提交" ><br><br>
        </form>  
    </div>  
</div>
  
<script>  
function addToCart(checkbox) {  

    if (checkbox.checked) {  
        var dish_id = checkbox.getAttribute('data-id');  
        var name = checkbox.getAttribute('data-name');  
    
        var data = JSON.stringify({  
            id: dish_id,  
            name: name,  
          
        var xhr = new XMLHttpRequest();  
        xhr.open('POST', 'saveToShoppingCart.jsp', true); 
  
     
        xhr.setRequestHeader('Content-Type', 'application/json');  
  
      
        xhr.onreadystatechange = function () {  
            if (xhr.readyState === 4 && xhr.status === 200) {  
            
                console.log(xhr.responseText); 
            }  
        };  
  
       
        xhr.send(data);  
    }  
}  

document.addEventListener('DOMContentLoaded', function() {
    var checkboxes = document.querySelectorAll('.add-to-cart');
    checkboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            if (this.checked) {
            
                var dishId = this.getAttribute('data-id');
                var name = this.getAttribute('data-name');
                var tr = this.closest('tr'); 
                var dishPrice = tr.cells[3].textContent; 
                
             
                document.getElementById('dish_id').value = dishId;
                document.getElementById('name').value = name;
                document.getElementById('price').value = dishPrice;
                document.getElementById('amount').value = 1; 
            }
        });
    });
});
</script>
</div>
<!--页脚开始-->
<div class="footer">
   <div>
        <a href="index.jsp">
            <i class="iconfont"></i>
            <p>首页</p>
        </a>
    </div>    
    <div>
        <a href="user.jsp">
            <i class="iconfont"></i>
            <p>用户登陆注册</p>
        </a>
    </div>

</div>
<!--页脚结束-->
</body>
</html>
